/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Button, Input, message, Popconfirm, Typography } from 'antd';
import { getInnSmsListJson, setInnSmsStatus } from '@/services/yz/smsMonitor';
import SmsDrawer from './SmsDrawer';

const { Text } = Typography;

const SmsMonitorInn = ({ activeKey }: { activeKey: string }) => {
  const actionRef = useRef<ActionType>();

  const setStatus = async (params: { cm_id: string; storage_sms_auth: string }) => {
    const { code, msg } = await setInnSmsStatus(params);
    if (code == 0) {
      actionRef.current?.reload();
    } else {
      message.error(msg);
    }
  };

  const columns: ProColumns<Record<string, string>>[] = [
    {
      title: '',
      hideInTable: true,
      dataIndex: 'selectVal',
      valueType: 'select',
      initialValue: 'notice_percentage',
      valueEnum: {
        notice_percentage: { text: '昨日短信/云呼量占比' },
        seven_notice_percentage: { text: '近七日短信/云呼量占比' },
      },
      fieldProps: {
        allowClear: false,
      },
    },
    {
      title: '小于等于',
      dataIndex: 'percent',
      align: 'center',
      ellipsis: true,
      hideInTable: true,
      renderFormItem: () => {
        return <Input placeholder='' />;
      },
    },
    {
      title: '',
      dataIndex: 'searchContent',
      align: 'center',
      ellipsis: true,
      hideInTable: true,
      renderFormItem: () => {
        return <Input placeholder='输入驿站ID、注册手机号、驿站名称' />;
      },
    },
    {
      title: '驿站ID',
      dataIndex: 'cm_id',
      align: 'center',
      search: false,
    },
    {
      title: '驿站名称',
      dataIndex: 'inn_name',
      align: 'center',
      search: false,
    },
    {
      title: '注册电话',
      dataIndex: 'phone',
      align: 'center',
      search: false,
    },
    {
      title: '昨日短信/云呼量占比',
      dataIndex: 'notice_percentage',
      align: 'center',
      search: false,
      render: (value) => <Text type='danger'>{value}%</Text>,
    },
    {
      title: '昨日入库数量',
      dataIndex: 'upload_cnt',
      align: 'center',
      search: false,
    },
    {
      title: '近七日短信/云呼占比',
      dataIndex: 'seven_notice_percentage',
      align: 'center',
      search: false,
      render: (value) => <Text type='danger'>{value}%</Text>,
    },
    {
      title: '近七日入库数量',
      dataIndex: 'seven_upload_cnt',
      align: 'center',
      search: false,
    },
    {
      title: '驿站余额',
      dataIndex: 'balance',
      align: 'center',
      search: false,
    },
    {
      title: '驿站分值',
      dataIndex: 'storage_auth',
      align: 'center',
      search: false,
    },
    {
      title: '近七日数据',
      dataIndex: 'seven_notice_percentage',
      align: 'center',
      search: false,
      render: (_, record) => (
        <SmsDrawer data={record}>
          <Button type='link'>详情</Button>
        </SmsDrawer>
      ),
    },
    {
      title: '允许入库不发短信',
      dataIndex: 'is_recorded',
      align: 'center',
      search: false,
      render: (_, record) => {
        const { only_sms_auth = 0, cm_id } = record;
        const recorded = only_sms_auth.toString();
        const title = `确认${recorded == '1' ? '开启' : '关闭'}入库不发短信`;
        return (
          <>
            <Popconfirm
              title={title}
              onConfirm={setStatus.bind(null, { cm_id, storage_sms_auth: 'close' })}
              disabled={recorded == '1'}
            >
              <Button type='link' disabled={recorded == '1'}>
                关闭
              </Button>
            </Popconfirm>
            <Popconfirm
              title={title}
              onConfirm={setStatus.bind(null, { cm_id, storage_sms_auth: 'open' })}
              disabled={recorded != '1'}
            >
              <Button type='link' disabled={recorded != '1'}>
                开启
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  const requestTableData = async (values: Record<string, string>) => {
    const { current, pageSize, selectVal, percent = '', ...rest } = values;
    const { code, data, msg } = await getInnSmsListJson({
      page: current,
      pageSize,
      status: activeKey,
      [selectVal]: percent,
      ...rest,
    });
    if (code == 0) {
      return { data: data.list, total: data.total };
    } else {
      message.error(msg);
      return { data: [], total: 0 };
    }
  };

  return (
    <>
      <DragTable>
        <ProTable<Record<string, string>>
          actionRef={actionRef}
          // params={{ activeKey }}
          rowKey='id'
          request={requestTableData}
          columns={columns}
          options={false}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          scroll={{ x: 1400 }}
        />
      </DragTable>
    </>
  );
};

export default SmsMonitorInn;
